<template>
  <div class="app-container">
    <div class="box">
      <dl v-for="r in regionsList">
        <dt>{{ r.text }}</dt>
        <dd v-for="city in r.children" @click="saveCity(city)">
          {{ city.text }}
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup>
import * as match from '@/api/match/pc'
import { onMounted } from '@vue/runtime-core'
import { reactive } from 'vue'
import { toRefs } from '@vueuse/shared'
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({
  regionsList: []
})
const { regionsList } = toRefs(data)

onMounted(() => {
  getRegionsList()
})
function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
const saveCity = (city) => {
  useUserStore().setCity(city)
  localStorage.setItem('city', JSON.stringify(city))
  router.push('/index')
}
</script>

<style scoped lang="scss">
  .box{max-width: 1400px;margin: auto;background: #f8f8f8;padding: 20px;}
  dl{
    dt{line-height: 1;border-left: 3px solid #1ab394;padding-left: 10px;margin: 20px 0 30px;}
    dd{display: inline-block;padding: 10px 20px;cursor: pointer;margin: 10px;}
    dd:hover{color: #1ab394;background: #eee;border-radius: 30px;}
  }
</style>
